<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图表示例</title>

    <!-- Bootstrap -->
  
   <link href="bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body onresize="ff()">
    <div class="container" style="margin-top: 10px;">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
          <div class="panel panel-success">
             <div class="panel-heading">
                <h3 class="panel-title">地图</h3>
             </div>
             <div id="chartpanel1" class="panel-body" style="height:462px;"></div>
          </div>
        </div>
        <div class="col-xs-12 col-md-6">
          <div class="panel panel-success">
             <div class="panel-heading">
                <h3 class="panel-title">柱状、折线</h3>
             </div>
             <div id="chartpanel2" class="panel-body" style="height:462px;"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
          <div class="panel panel-success">
             <div class="panel-heading">
                <h3 class="panel-title">折线、饼图、时间轴</h3>
             </div>
             <div id="chartpanel3" class="panel-body" style="height:462px;"></div>
          </div>
        </div>
      </div>  
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    
    <script src="../js/jQuery-2.1.4.min.js"></script>
  
    	
    <!-- Include all compiled plugins (below), or include individual files as needed -->
  
   <script src="bootstrap.min.js"></script>
  <!--
  <script src="js/echarts.js"></script>
   <script src="../Echarts3/js/echarts.min.js"></script>
  -->
 
    <script src="new/infovis.min.js"></script>
    
    <script type="text/javascript">
    var engine ;
        $.getJSON('test2.json', function(config) {
             engine = infovis.init(config || {});
            console.log(engine)
            if(engine) {          
                engine    
                .render("chartpanel1", "dataset02", "chart1") 
                .render("chartpanel3", "dataset02", "138")   
                .render("chartpanel2", "dataset02", "138")     
//              .render("chartpanel3", "dataset01", "chart3")
//              .render("chartpanel1", "dataset01", "chart1")
                .registerAction("mapselectchanged", function (params) {
                    if(params.name === '香港') {
                        if(params.selected[params.name]) {
                            engine.render("chartpanel1", "dataset01", "chart2");
                        }
                    }
                });
               
            }
        });
        function ff(){
        	 var chart=engine.chartInstances['chartpanel1'];
        	 var chart2=engine.chartInstances['chartpanel2'];
//      	  chart=engine.chartInstances['chartpanel3'];
//      	 console.log(chart);
        	 chart.resize();
        	 chart2.resize();
//      	 chart.registerTheme("macarons")
					 engine.render("test", "dataset02", "chart1") 
        }
    </script>
    <div id="test" style="width: 500px; height: 300px; border: 1px solid red;"></div>
  </body>
</html>